<template>
  <page-frame>
    <div class="workPlanInfo">
      <div class="toptitle">
        <div class="left">工作计划-详情</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="savePlan">保存计划</el-button>
            <router-link :to="{name:'workPlan'}"><el-button>返回</el-button></router-link>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-form :model="ruleForm" ref="ruleForm" :label-position="labelPosition" label-width="100px" class="demo-ruleForm">
        <div class="panel">
          <div class="panel-title first">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">基本信息</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <el-row>
              <el-col :span="8" >
                <el-form-item label="员工">
                  <el-input v-model="ruleForm.emName" :disabled="status"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="团队">
                  <el-input v-model="ruleForm.team" :disabled="status"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="ruleForm.date"
                    type="date"
                    placeholder="选择日期"
                    :disabled="status"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title free">
            <div class="grid-content bg-purple">工作计划</div>
          </div>
          <div class="panel-content">
            <el-row>
              <el-table
                :data="tableData"
                border
                style="width: 95%">
                <!--<el-table-column-->
                  <!--label="工作开始时间"-->
                  <!--width="180">-->
                  <!--<template scope="scope">-->
                    <!--<el-time-picker-->
                      <!--format="HH:mm"-->
                      <!--v-model="scope.row.startTime"-->
                      <!--:disabled="scope.row.timeDisabled"-->
                      <!--placeholder="选择时间">-->
                    <!--</el-time-picker>-->
                  <!--</template>-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                  <!--label="工作结束时间"-->
                  <!--width="180">-->
                  <!--<template scope="scope">-->
                    <!--<el-time-picker-->
                      <!--format="HH:mm"-->
                      <!--v-model="scope.row.endTime"-->
                      <!--:disabled="scope.row.timeDisabled"-->
                      <!--placeholder="选择时间">-->
                    <!--</el-time-picker>-->
                  <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column
                  label="工作时间"
                  prop="workTime"
                  width="250">
                  <template scope="scope">
                    <el-time-picker
                      is-range
                      format="HH:mm"
                      v-model="scope.row.workTime"
                      :disabled="scope.row.timeDisabled || isChange"
                      placeholder="选择时间范围">
                    </el-time-picker>
                  </template>
                </el-table-column>
                <el-table-column
                  label="频次"
                  width="230">
                  <template scope="scope">
                    <el-row>
                      <el-col :span="14">
                        <el-select v-model="scope.row.period" placeholder="" :disabled="status">
                          <el-option
                            v-for="item in frequencyList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="9">
                        <el-input @change="toNumber(scope.row)" v-if="scope.row.period!=0" v-model="scope.row.num" :disabled="status"></el-input>
                      </el-col>
                      <el-col :span="1" v-if="scope.row.period!=0"><span class="frequencyUnit">次</span></el-col>
                    </el-row>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="remainNum"
                  label="剩余次数"
                  width="150">
                  <template scope="scope">
                    <el-row>
                      <el-col :span="18">
                        <el-input @change="toNumber(scope.row)" v-if="scope.row.period!=0" v-model="scope.row.remainNum" :disabled="status"></el-input>
                      </el-col>
                      <el-col :span="1" v-if="scope.row.period!=0"><span class="frequencyUnit">次</span></el-col>
                    </el-row>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="serviceName"
                  label="服务项目"
                  width="">
                </el-table-column>
                <el-table-column
                  label="服务描述"
                  prop="description"
                  width="">
                </el-table-column>
                <el-table-column
                  label="会员"
                  prop="memberNames"
                  width="">
                </el-table-column>
              </el-table>
              <!--<div class="pagination">-->
                <!--<div class="block">-->
                  <!--<el-pagination-->
                    <!--@size-change="handleSizeChange"-->
                    <!--@current-change="handleCurrentChangePage"-->
                    <!--:current-page="currentPage"-->
                    <!--:page-size="10"-->
                    <!--layout="total, prev, pager, next"-->
                    <!--:total="total">-->
                  <!--</el-pagination>-->
                <!--</div>-->
              <!--</div>-->
            </el-row>
          </div>
        </div>
      </el-form>
    </div>
  </page-frame>
</template>

<script >
  import scheduleApi from '../../service/serManagement/scheduleApi'
  export default {
    data () {
      return {
        formLabelWidth:'100px',
        labelPosition: 'right',
        status:true,
        isChange:false,
        ruleForm:{
          "date": "",
          "emId": 0,
          "emName":"",
          "team":"",
          "teamId":0
        },
        tableData:[],
        frequencyList:[
          {
            value:0,
            label:'每天'
          },{
            value:1,
            label:'每周'
          },{
            value:2,
            label:'每月'
          }
        ],
        total:1,
        currentPage: 1,
      }
    },
    methods: {
      init() {
        this.ruleForm.date = this.$route.params.emObj.date;
        this.ruleForm.emId = this.$route.params.emObj.emId;
        this.ruleForm.emName = this.$route.params.emObj.emName;
        this.ruleForm.team = this.$route.params.emObj.team;
        this.ruleForm.teamId = this.$route.params.emObj.teamId;
        if(new Date(this.ruleForm.date) <= new Date()){
          this.isChange = true;
        };
        this.loadTableData();
      },
      /**
       * 加载基本信息
       */
      loadTableData(){
        scheduleApi.getWorkPlanDetailList(this.ruleForm).then(res=>{
          this.tableData = res.body.data;
          for(var table of this.tableData){
            if(table.period == "0"){
              table.timeDisabled = true;
            }else {
              table.timeDisabled = false;
            };
            table.workTime[0] = new Date(table.startTime);
            table.workTime[1] = new Date(table.endTime);
          };
        })
      },
      /**
       * 保存计划
       */
      savePlan(){
        let updateEmWorkPlan =[];
        for(var table of this.tableData){
          table.startTime =table.workTime[0];
          table.endTime =table.workTime[1];
          if(table.period != "0"){
            updateEmWorkPlan.push(table);
          }
        };
        scheduleApi.updateEmWorkPlanDetailTime(updateEmWorkPlan).then(res=>{
          this.$router.push({name:'workPlan'});
          this.$message({
            message: '提交成功',
            type: 'success'
          });
        },res=> {
          this.$message({
            message: '提交失败',
            type: 'warning'
          });
        })
      },
      /**
       * 分页函数
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      },
    },

    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  .workPlanInfo .el-form{
    width: 100%;
    /*margin: 0 auto;*/
  }
  .workPlanInfo .panel-title.free{
    margin-top: 50px;
  }
  .workPlanInfo .frequencyUnit{
    display:inline-block;
    height:36px;
    line-height:36px;
  }
  .workPlanInfo .el-scrollbar__view.el-time-spinner__list{
    display: none;
  }
</style>
